<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
        <title>报名表</title>
        <script src="js/flexible.debug.js"></script>
        <link href="css/apply.css" rel="stylesheet">
        <link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
        <link rel="stylesheet" type="text/css" href="./css/bg.css">
        <link rel="icon" href="./img/vtmerLogin.ico" type="image/x-icon"/>
    </head>
    <body>
        <div id="wrap" class="mmm">
            <div id="header">
                <img class="LOGO" src="img/LOGO.png" alt="vtmer">
                <a href="index.html" class="BTN-HOME"><img src="img/BTN-HOME.png" alt="hmoe"/></a>
            </div>
            <div class="mainbody">
                <div class="upimg">
                    <img src="img/apply/headbg.png" alt="headbg" />
                    <img src="img/apply/headqinyuan.png" height="640" width="640" alt="userimg" id="userimg" />
                    <img src="img/apply/camera.png" height="62" width="62" alt="camera" id="camera"/>
                    <input type="file" name="avatar" id='upImg' accept="image/*" form="FupForm">
                </div>
                <div class="mainForm">
                    <div class="mainForm-content">
                        <div class="mainForm-content-menu">
                            <div>
                                <span class="menu-number menu-number-active">①</span>
                                <span class="menu-text menu-active">选择组别</span>
                                <span class="menu-symbol">&gt;&gt;</span>
                                <span class="menu-number">②</span>
                                <span class="menu-text" >基本信息</span>
                                <span class="menu-symbol">&gt;&gt;</span>
                                <span class="menu-number">③</span>
                                <span class="menu-text">详细信息</span>
                            </div>
                        </div>
                        <div class="mainForm-content-banner">
                            <div class="banner-list" >
                                <div class="mainForm-content-groupChoice" >
                                    <div>
                                        <p>请选择组别 (<span class="groupChoiceMsg">现只招运营组</span>)</p>
                                        <div class="choice-buttons">
                                            <input type="button" value="运营组" class="active choice-button" />
                                            <input type="button" value="前端组" class=" choice-button"  />
                                            <input type="button" value="后台组" class=" choice-button" />
                                            <input type="button" value="设计组" class=" choice-button" />
                                        </div>
                                        <div class="choice-introduce">
                                            <div class="choice-introduce-active"><p> 运营运营的策划者，<br/> 产品的背后分析优化者，<br/> 用户的产品维护者。</p></div>
                                            <div><p> 主要基于Html/CSS/Javascipt，运用Jquery等库开发网页，以及运用AugularJS/Vue.js/React.js开发web应用，致力于呈现优美的页面，提供优秀的交互，并且在不断的改进中，使体验更加完美。 </p></div>
                                            <div><p> 我们认为，PHP是世界上最好的语言，没有之一。我们使用Linux/Unix，使用Terminal作为工作室的技术担当，拥有工作室最丰富的技术栈,PHP、JavaScript、Python、Ruby、Java自由切换，SQL、NoSQL灵活应用。</p></div>
                                            <div><p>   属性：夜晚较为活泼物种 <br/>
                                                特征：脸色苍白、面无表情、黑眼圈、僵硬的肢体（与吸血鬼、僵尸特征相似）<br/>但是我们爱设计，爱生活，爱天马行空的想象。熬了无数的夜就是希望自己的作品能打动观看者的心。 <br/>
                                            爱，便义无反顾。<br/> </p></div>
                                        </div>
                                    </div>

                                </div>
                                <div class="mainForm-content-baseMsg">
                                    <form name="FupForm" id='FupForm' class="baseMsgForm">
                                        <div>
                                            <p><span class="star">∗</span>姓名</p>
                                            <input type="text" id="Username" name='name'/>
                                        </div>
                                        <div>
                                            <p><span class="star">∗</span>学院专业</p>
                                            <input type="text" id="Usercollege" name='academy' />
                                        </div>
                                        <div>
                                            <p><span class="star">∗</span>联系方式</p>
                                            <input type="text" id="Usernumber" name="phone" />
                                        </div>
                                    </form>

                                </div>
                                <div class="mainForm-content-detailMsg">
                                    <div>
                                        <p>个人简介</p>
                                        <textarea id="signupBrief" placeholder="请在此输入简介" form='FupForm' name="intro"></textarea>
                                        <p>个人经历</p>
                                        <textarea id="signupBrief" placeholder="请在此输入经历" form="FupForm" name="exper"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="button" value="上一步"  class="previous"/>
                        <input type="button" value="下一步" class="next"/>
                    </div>
                </div>
            </div>
        </div>
        <!-- 背景 -->
        <div class="BgContain">
            <ul class="scene" id="S1" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg1'><img src="img/bg1.png"></li>
            </ul>
            <ul class="scene" id="S2" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg2'><img src="img/bg7.png"></li>
            </ul>
            <ul class="scene" id="S3" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.40" id='bg3'><img src="img/bg3.png"></li>
            </ul>
            <ul class="scene" id="S4" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg6.png"></li>
            </ul>
            <ul class="scene" id="S5" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg4.png"></li>
            </ul>
            <ul class="scene" id="S6" data-scalar-x="38" data-scalar-y="38">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg9.png"></li>
            </ul>
            <ul class="scene" id="S7" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg7'><img src="img/bg11.png"></li>
            </ul>
            <ul class="scene" id="S8" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="0.60" id='bg4'><img src="img/bg10.png"></li>
            </ul>
            <ul class="scene" id="S9" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="0.80" id='bg5'><img src="img/bg8.png"></li>
            </ul>
            <ul class="scene" id="S10" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg2.png"></li>
            </ul>
            <ul class="scene" id="S11" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg12.png"></li>
            </ul>
            <ul class="scene" id="S12" data-scalar-x="28" data-scalar-y="28">
                <li class="layer" data-depth="1.00" id='bg6'><img src="img/bg5.png"></li>
            </ul>
        </div>
        <!-- Loading提交 -->
        <div class="LoadingWrap">
            <div class="loading">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <script src="js/jq.min.js"></script>
        <script src="js/apply/apply1.js"></script>
        <script src='./js/jquery.parallax.min.js'></script>
    </body>
</html>